<template>
	<view>
		<view class="travels">
			<!-- 分类 -->
			<view class="classify-view">
				<view class="classify-text">分类</view>
				<block
					v-for="(item, index) in fication"
					:key="index">
					<view class="classify">
						<text
							:class="{ activetext: index == num }"
							@click="menubtn(index, item.name)">
							{{ item.name }}
						</text>
					</view>
				</block>
			</view>
			<!-- 标题 -->
			<view class="travels-title">
				<input
					type="text"
					placeholder="给你的简历起一个标题吧"
					class="place-text"
					v-model="titledata" />
			</view>
			<!--描述-->
			<view class="travels-describe">
				<textarea
					placeholder="描述下你的工作经历,掌握的技能等"
					v-model="tipsdata"></textarea>
			</view>
		</view>
		<!-- 上传图片  -->
		<view class="travels-image">
			<view class="topimg">
				<image
					src="cloud://liuwenjun-1g6675p9d28d14a3.6c69-liuwenjun-1g6675p9d28d14a3-1305215936/tab/添加.svg"
					mode="widthFix"
					@click="uploadImg()"></image>
			</view>
			<!-- 九宫格 -->
			<view class="conteng">
				<block
					v-for="(item, index) in topimg"
					:key="index">
					<view class="conteng-img">
						<image
							:src="item"
							mode="aspectFill"
							class="uploadimg"
							@click="preImage(index)"></image>
						<image
							src="cloud://liuwenjun-1g6675p9d28d14a3.6c69-liuwenjun-1g6675p9d28d14a3-1305215936/tab/品类删除.svg	"
							mode="widthFix"
							class="deleteimg"
							@click="deleteImg(index)"></image>
					</view>
				</block>
			</view>
		</view>
		<!-- 上传视频 -->
	<!-- 	<view class="travels-video">
			<view class="topimg">
				<image
					src="../../static/tab/上传视频.svg"
					mode="widthFix"
					@click="uploadVideo()"></image>
			</view>
			<view
				class="uploadvideo"
				v-if="uploadvideos">
				<video
					:src="videos"
					controls
					objectFit="cover"></video> -->
				<!-- 这里上传后显示的图片后面可以优化，注意和视频里JavaScript教程写法有所不同，我这里上传视频后不是数组res没下标，不知道为啥 -->
				<!-- <image
					class="pause"
					src="../../static/tab/品类删除.svg"
					@click="deleteVideo()"></image> -->
		<!-- 	</view> -->
		<!-- </view> -->
		<!-- 定位 -->
		<view class="address">
			<view class="address-text">你在哪里</view>
			<view class="address-site">
				<image
					src="cloud://liuwenjun-1g6675p9d28d14a3.6c69-liuwenjun-1g6675p9d28d14a3-1305215936/tab/_定位小.svg"
					mode="widthFix"></image>
				<text @click="chooseCity()">{{ address }}</text>
			</view>
		</view>
		<!-- 当前时间 -->
	<!-- 	<view>{{time}}</view> -->
		
		
		
		
		<!-- 发布 -->
		<view
			class="release"
			@click="suBmitd()">
			<text>发布</text>
		</view>
		<!-- 及时反馈文件 ref相当于传统开发的组件id,就是表示不同-->
		<HMmessages
			ref="HMmessages"
			@complete="HMmessages = $refs.HMmessages"
			@clickMessage="clickMessage"></HMmessages>
		<!-- 登录模态框 -->
		<motal ref="mon"></motal>
		<!-- 提示用户上传成功与否 -->
		<view class="warp"v-if="relend">
			<view class="warp-view tipmin">
				<text>{{reldata}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	// 引入预览图片和定位
	import { preview, addressdata } from '../../common/list.js'
	import { mapState } from 'vuex'
	// 引入及时反馈组件
	import HMmessages from '@/components/HM-messages/HM-messages.vue'
	// 引入模态框
	import motal from '../../element/modal.vue'
	//引入当前时间的js
	var util=require('../../common/util.js');
	var time=util.formatTime(new Date());
	//定义数据库
	var db = wx.cloud.database()
	var users = db.collection('user')
	export default {
		name: 'travels',
		components: { HMmessages, motal },
		data() {
			return {
				num: 0,
				time:time,
				fication: [
					{
						name: 'java工程师'
					},
					{
						name: '软件测试'
					},
					{
						name: '前端开发'
					}
					// qq
				],
				uploadvideos: false, //没有视频就隐藏掉不展示
				watchaddress: '',
				classdata: '其他', //分类
				titledata: '', //标题
				tipsdata: '', //描述
				topimg: [], //上传的图片
				videos: '', //上传的视频
				address: '', //定位
				avatarUrl: '', //用户头像
				nickName: '', //用户昵称
				openid: '' ,//用户openid
				reldata:'正在发布...请勿关闭该页面',//提示用户正在发布
				relend:false
				
			}
		},
		methods: {
			menubtn(index, name) {
				this.num = index
				console.log(name)
				this.classdata = name
			},
			// 上传图片
			uploadImg() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						console.log(...res.tempFilePaths)
						this.topimg.push(...res.tempFilePaths)
					}
				})
			},
			deleteImg(index) {
				console.log(index)
				this.topimg.splice(index, 1)
				console.log(this.topimg)
			},
			// 预览图片
			preImage(index) {
				// console.log(index)
				let imglist = this.topimg
				preview(index, imglist)
					.then(res => {
						console.log('预览成功')
					})
					.catch(err => {
						console.log('预览失败')
					})
				// 封装到list.js里面去了
				// uni.previewImage({
				// 	        current:index,//数组里的下标，点它就能点出来
				// 			urls: this.topimg,//所有的图片数组
				// 			longPressActions: {
				// 				itemList: ['发送给朋友', '保存图片', '收藏'],
				// 				success:(data)=>{
				// 				console.log(data);
				// 				},
				// 				fail: (err)=>{
				// 					console.log(err);
				// 				}
				// 			}
				// 		});
			},
			// 上传视频
			uploadVideo() {
				uni.showLoading({
					title: '上传中'
				})
				uni.chooseVideo({
					count: 1, //表示上传一个
					sourceType: ['camera', 'album'],
					maxDuration: 20 //最长拍摄时长
				})
					.then((res) => {
						console.log(res)
						this.videos = res.tempFilePath //res的第一项，上传后找到那个
						this.uploadvideos = true
						uni.hideLoading()
					})
					.catch((err) => {
						console.log(err)
					})
			},
			//删除视频
			deleteVideo() {
				this.videos = ''
				this.uploadvideos = false
			},
			// 定位
			addRess() {
				addressdata()
					.then(res => {
						console.log(res)
						let city = res.result.ad_info.city
						this.address = city
					})
					.catch(err => {
						console.log(err)
						this.address = '定位失败'
					})
			},
			// 跳转到选择城市页面
			chooseCity() {
				uni.navigateTo({
					url: '../city/city'
				})
			},
			//提交
			suBmitd() {
				// console.log('66666')
				// console.log(this.classdata)
				// console.log(this.titledata)
				// console.log(this.tipsdata)
				// console.log(this.topimg)
				// console.log(this.videos)
				// console.log(this.address)
				if (this.titledata == '') {
					let tip = '标题必填'
					this.proMpt(tip)
				} else if (this.tipsdata == '') {
					let tip = '描述必填'
					this.proMpt(tip)
				} else if (this.topimg.length < 1) {
					let tip = '图片不得少于一张'
					this.proMpt(tip)
				} else {
					console.log('可以提交')
					//判断用户是否登录，登录再提交
					this.userinfo()
				}
			},

			//判断用户是否登录
			userinfo() {
				//请求数据库查看用户是否存在，存在就是登录，反之就是未登录
				
				users
					.get()
					.then(res => {
						console.log(res)
						//length ==0 说明用户没有登录
						if (res.data.length == 0) {
							console.log('没有登录')
							//弹出模态框
							let massage = '请登录后再操作'
							this.$nextTick(() => {
								//表示dom更新循环结束之后的延迟回调
								this.$refs.mon.init(massage)
							})
						} else {
							console.log('已经登录')
							//取到用户头像，昵称，openid,这里接口要改
							let usermen = res.data[0]
							this.avatarUrl = usermen.avatarUrl //头像
							this.nickName = usermen.nickName //名字
							this.openid = usermen._openid //id
							//可以上传用户提交的数据到数据库
							this.relend=true
							this.userdata()
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			//用户上传数据到数据库：1.await先上传图片到云存储2.await上传视频到云存储3.await上传所有数据到数据库
			async userdata() {
				//先等待图片上传到云存储
				let staticimg = await this.staticImg()
				console.log(staticimg)
				//等待视频上传到云储存
				let staticvideo = await this.staticVideo()
				console.log(staticvideo)
				//最后一步将用户填写的所有数据一并提交到数据库
		        await this.cloudData(staticimg,staticvideo)
				
			},
			//先等待图片上传到云存储
			staticImg() {
				//把上傳成功的圖片返回數組裡
				var imgfileID = []
				return new Promise((resolve, reject) => {
					//取出图片数组里的每一项,forEach遍历类似于for,是ES6的写法
					this.topimg.forEach(img => {
						// console.log(img)
						//随机字符串拼接图片，防止同名文件产生而被后一个覆盖前一个文件（云存储的问题）
						let imgion = img.lastIndexOf('.')
						let eximg = img.slice(imgion)
						//从1970年开始到现在的毫秒数,$是拼接字符串用的,注意符号`，在esc下面的那个符号，不是单引号
						let cloudpath = `${Date.now()}-${Math.floor(
							Math.random(0, 1) * 10000000
						)}${eximg}`
						console.log(cloudpath)
						wx.cloud
							.uploadFile({
								cloudPath: 'static/' + cloudpath,
								filePath: img //文件路径
							})
							.then(res => {
								// console.log(res)
								imgfileID.push(res.fileID)
								console.log('图片上传完成')
								//判断云存储返回的图片是否和用户上传的图片一样多
								if (imgfileID.length == this.topimg.length) {
									resolve(imgfileID)
								}
							})
							.catch(error => {
								console.log(error)
							})
					})
				})
			},
			//先等待视频上传到云存储
			staticVideo() {
				return new Promise((resolve, reject) => {
					//用户是否要上传视频
					if (this.videos == '') {
						console.log('用户不上传')
						resolve('')
					} else {
						console.log('要上传视频')
						let videoion = this.videos.lastIndexOf('.')
						let exvideo = this.videos.slice(videoion)
						let cloudpath = `${Date.now()}-${Math.floor(
							Math.random(0, 1) * 10000000
						)}${exvideo}`
						console.log('取到了视频', cloudpath)
						wx.cloud
							.uploadFile({
								cloudPath: 'staticvideo/' + cloudpath,
								filePath: this.videos, //文件路径
							})
							.then((res) => {
								console.log('视频上传完毕')
								// resolve(res.fileID)
							})
							.catch((err) => {
								console.log(err)
								// console.log('视频上传失败')
							})
					}
				})
			},

        //最后一步将用户填写的所有数据一并提交到数据库
        cloudData(staticimg,staticvideo){
			let datas={
				classdata:this.classdata,//分类
				titledata:this.titledata,//标题
				tipsdata:this.tipsdata,//描述
				staticimg:staticimg,//图片
				// staticvideo:staticvideo,//视频
				address:this.address, //定位
				avatarUrl:this.avatarUrl, //用户头像
				nickName:this.nickName, //用户昵称
				openid:this.openid,//用户openid
				time:time
			}
			db.collection('userdata').add({
				//data表示要上传的数据
				data:{
					datainfo:datas
				}
			})
			.then((res)=>{
				console.log(res)
				//提示用户发布成功，跳转到攻略页面
				this.reldata='发布成功，正在跳转...'
				//用户发表景点成功，传值给攻略页面，让攻略页面再次请求数据
				let pagesid=true
				setTimeout(()=>{
					uni.switchTab({
						url:'../strategy/strategy'
					},1700)
					this.$store.commit('roturnmuta',pagesid)
				})
				
			})
			.catch((err)=>{
				console.log(err)
			})
		},
			//即时反馈
			proMpt(tip) {
				this.HMmessages.show(tip, {
					icon: 'error',
					iconColor: '#ffffff',
					fontColor: '#ffffff',
					background: 'rgba(102, 0, 51, 0.6)'
				})
			}
		},
		created() {
			// 定位
			this.addRess()
		},
		//计算属性
		computed: {
			...mapState(['travecity']),
			count() {
				this.watchaddress = this.travecity.traveing
			}
		},
		watch: {
			watchaddress(newValue, oldValue) {
				console.log(newValue)
				this.address = newValue
			}
		}
	}
</script>

<style scoped>
	.travels {
		padding: 10upx 20upx;
	}
	.classify text {
		display: block;
		font-size: 27upx;
		color: #14181e;
		background: #f7f7f7;
		padding: 10upx 20upx;
		border-radius: 20upx;
		margin: 0 30upx;
	}
	.classify {
		display: flex;
	}
	.classify-text {
		font-size: 30upx;
		color: #14181e;
		font-weight: bold;
	}
	.classify-view {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.city-view {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	/* 选中的样式 */
	.activetext {
		background: #00aaff !important;
	}
	/* 标题 */
	.place-text {
		color: #808080 !important;
		font-size: 30upx;
	}
	.travels-title {
		margin: 40upx 0;
	}
	/* 描述 */
	.travels-describe textarea {
		width: 100%;
		color: #808080 !important;
		font-size: 30upx;
	}
	/* 上传图片 */
	.topimg {
		padding-left: 20upx;
		padding-top: 10upx;
	}
	.topimg image {
		width: 150upx;
		height: 150upx;
		border-radius: 20upx;
	}
	/* 九宫格 */
	.conteng {
		display: flex;
		flex-wrap: wrap;
		margin-left: 4px;
		margin-right: 4px;
	}
	.conteng-img {
		width: calc((100% / 4)-8px) !important;
		margin: 4px;
		height: 176upx;
		position: relative;
	}

	.uploadimg {
		width: 150upx !important;
		height: 150upx !important;
		border-radius: 10upx;
	}
	/* 删除图片 */
	.deleteimg {
		width: 38upx;
		height: 38upx;
		position: absolute;
		top: 6upx;
		right: 6upx;
	}
	/* 上传视频 */
	.uploadvideo video {
		width: 100%;
		height: 400upx;
		border-radius: 5upx;
	}
	.uploadvideo {
		margin: 0 8px;
		border-radius: 5upx;
		position: relative;
	}
	/* 覆盖视频 */
	.pause {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 6upx;
		right: 6upx;
	}
	/* 位置 */
	.address-site {
		display: flex;
		align-items: center;
	}
	.address-site image {
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}
	.address-site text {
		font-size: 30upx;
		color: #00a2ff;
	}
	.address-text {
		font-size: 30upx;
		color: #333333;
		padding-right: 40upx;
	}
	.address {
		display: flex;
		background: #f1f1f1;
		padding: 20upx 0 20upx 20upx;
		margin-top: 30upx;
		margin-bottom: 160upx;
	}
	/* 发布 */
	.release {
		background: #00aaff;
		width: 100%;
		height: 100upx;
		font-size: 40upx;
		line-height: 100upx;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.release text{
     color: #FFFFFF;	
	}
	/* 提示用户上传成功与否 */
	.warp{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
	}
	.warp-view{
		width: 500upx;
		height: 200upx;
		background: #FFFFFF;
		margin: auto;
		position: absolute;
		-webkit-position:absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 8upx;
		overflow: hidden;
	}
	/* 提示框 */
	.tipmin text{
		font-size: 34upx;
		display: flex;
		justify-content: center;
		line-height: 200upx;
	}
</style>
